<%@page pageEncoding="utf-8" %>
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <jsp:include page="/resources/layout/_css.jsp"/>
    <link rel="stylesheet" href="${ctx}/resources/css/plugins/bootstrap-table/bootstrap-table.min.css">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>学生列表</h5>
                </div>
                <div class="ibox-content">
                    <table id="table"></table>
                    <div class="btn btn-primary" onclick='deleteSelect()'>删除所选</div>
                    <div class="btn btn-primary" onclick='addStudentPop()'>添加学生</div>
                    <div class="btn btn-primary" onclick='addStudentPop2()'>添加学生2</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<jsp:include page="/resources/layout/_script.jsp"/>
<script src="${ctx}/resources/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/resources/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $('#table').bootstrapTable({
        url: '${ctx}/student/list',
        columns: [
            {
                checkbox: true

            }, {
                field: '',
                title: '序号',
                formatter: function (value, row, index) {
                    var pageSize = $('#table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
                    var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
                }
            }, {
                field: 'name',
                title: '姓名',
                sortable: true
            }, {
                field: 'birthday',
                title: '生日'
            }, {
                field: 'gender',
                title: '性别',
                sortable: true,
                formatter: function (v1) {
                    if (v1 == 1) {
                        return '男';
                    } else if (v1 == 2) {
                        return '女';
                    } else {
                        return v1;
                    }
                }
            }, {
                field: 'city',
                title: '城市'
            }, {
                field: 'caozuo',
                title: '操作',
                formatter: function (v1, v2, v3) {
                    /* console.log(v1);
                    console.log(v2);
                    console.log(v3); */
                    return ['<a class="edit" href="javascript:void(0)" title="Like">',
                        '<i class="fa fa-pencil"></i>',
                        '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
                        '<a class="remove" href="javascript:void(0)" title="Remove">',
                        '<i class="glyphicon glyphicon-remove"></i>',
                        '</a>'].join('');
                },
                events: 'caocuoEvents'
            }],
        pagination: true,
        pageSize: 5,
        pageList: [5, 10, 20],
        search: true,
        showRefresh: true,
        showColumns: true,
        clickToSelect: true,
        queryParamsType: '',
        sidePagination: 'server',
        formatLoadingMessage: function () {
            return '';
        }
    });
    window.caocuoEvents = {
        'click .edit': function (e, value, row) {
            layer.open({
                icon: 2,
                content: row['sid']
            });
        },
        'click .remove': function (e, value, row) {
            if (confirm('是否删除')) {
                console.log(row);
                $.post('${ctx}/student/remove/' + row['sId'], function (r) {
                    layer.msg(r.message);
                    if (r.code == 200) {
                        $('#table').bootstrapTable('refresh');
                    }
                }, 'json');
            }
        }
    };

    function deleteSelect() {
        arr = $('#table').bootstrapTable('getSelections');
        arr2 = [];
        for (i in arr) {
            arr2.push(arr[i]['sid']);
        }
        str = JSON.stringify(arr2);
        $.get('${ctx}/StudentServlet/removeAll', {'sids': str}, function (r) {
            if (r) {
                $('#table').bootstrapTable('hideLoading');
                layer.msg("删除了" + r + "行数据");
                $('#table').bootstrapTable('refresh');
            } else {
                layer.msg("删除失败");
            }
        });
    }

</script>
</html>